<script setup lang="ts">
import Sidebar from '@/layout/Sidebar.vue'
import Header from '@/layout/Header.vue'
// import {ref,onMounted,watch} from 'vue';

</script>
<template>
	<div id="container">	
		<div class="bgimg"></div>
		<!-- 侧边栏区域 -->
		<aside class="sidebar">
			<Sidebar />
		</aside>
		<div style="height: 100%; display: flex; flex-direction: column; width: 100%;flex-grow: 1;">
			<Header />
			
				<router-view v-slot="{ Component}">
					<keep-alive include="DashboardComponent">
						<component :is="Component" />
					</keep-alive>
				</router-view>
		</div>
	</div>
</template>

<style scoped>
/* 
	.content-warp{position: relative; flex-grow: 1;display: flex;flex-direction: column; overflow: hidden; height: 100%;}
	.content{ height: 100%;} */
	#container{display: flex; height:100%; width: 100%;flex-direction: row;}
	.sidebar{flex-shrink: 0;flex-basis: var(--navigation-expend-width);}
	.bgimg{
		width: 100vw;
		height: 100vh;
		background: no-repeat url(@/assets/bgimg.png) var(--color-bg-b0);
		position: fixed;
		z-index: -1;
		background-repeat: no-repeat;
	}
	@media (max-width: 1240px){
		.sidebar{
			flex-basis: var(--navigation-width);
		}
	}

</style>
